<template>
  <div>
    <h2>成本统计</h2>
    <div class="page-container">
      <el-form :inline="true" :model="dataForm" ref="dataForm" :rules="dataFormRules">
        <el-form-item prop="shop" label="店铺">
          <el-select v-model="dataForm.shop" :clearable="true" placeholder="请选择店铺" style="width: 10em">
            <el-option v-for="item in shops"
                       :key="item.id"
                       :label="item.name+'('+item.platform+')'"
                       :value="item.name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="tradeMonth" label="月份">
          <el-date-picker v-model="dataForm.tradeMonth"
                          style="width: 10em"
                          type="month"
                          value-format="yyyy-MM"
                          placeholder="统计月份">
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="exchangeRate" label="汇率">
          <el-input-number v-model="dataForm.exchangeRate"
                           :precision="2"
                           :min='0.00'
                           :step='0.50'>
          </el-input-number>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="submitForm">统计</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Count",
    data() {
      return {
        shops: [],
        dataForm: {
          shop: '',
          tradeMonth: '',
          exchangeRate: 6.40
        },
        editLoading: false,
        dataFormRules: {
          shop: [
            {required: true, message: '请选择店铺', trigger: 'blur'}
          ],
          tradeMonth: [
            {required: true, message: '请选择要计算的月份', trigger: 'blur'}
          ]
        },
      }
    },
    methods: {
      //获取店铺信息
      findShopList() {
        this.$api.shop.findAll().then(
          (res) => {
            this.shops = res.data;
          }
        )
      },
      //提交表单
      submitForm() {
        this.$refs.dataForm.validate((valid) => {
          if (valid) {
            let text = [
              '确认执行以下统计吗?',
              '店铺：' + this.dataForm.shop,
              '月份：' + this.dataForm.tradeMonth,
              '汇率：' + this.dataForm.exchangeRate
            ];
            let newDatas = [];
            let h = this.$createElement;
            for (let i in  text) {
              newDatas.push(h('p', null, text[i]));
            }
            this.$confirm(
              '提示',
              {
                title: '提示',
                message: h('div', null, newDatas),
                showCancelButton: true,
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }
            ).then(() => {
              this.$api.revenue.execute(this.dataForm).then((res) => {
                if (res.code === 200) {
                  this.$message({message: '操作成功', type: 'success'});
                  this.dialogVisible = false;
                  this.$refs['dataForm'].resetFields();
                } else {
                  this.$message({message: res.message, type: 'error'});
                }
                this.findPage()
              });
            })
          }
        })
      }
    },
    mounted() {
      this.findShopList();
    }
  }
</script>

<style scoped>

</style>
